
let lists = ["杨振", "振杨", "杨杨振振"];

function d() {
    //先清空ul里面的li，然后再用for循环添加li
    document.querySelector("#ul").innerHTML = "";
//数据
//创建一个for循环
    for (let i = 0; i < lists.length; i++) {
        //创建li标签
        let li = document.createElement("li");
        li.classList.add("list-group-item");
        li.classList.add("d-flex");
        li.classList.add("justify-content-between");
        li.classList.add("align-items-center");

        let span = document.createElement("span");
        let spanText = document.createTextNode(lists[i]);
        //把文本内容，追加到创建的span标签里面
        span.appendChild(spanText);
        span.addEventListener("dblclick",function () {
            console.log(this);
            this.setAttribute("contenteditable",true)
        })

        let button = document.createElement("button");
        button.type = "button";
        button.classList.add("close");
        button.innerHTML = "&times;";

        //给删除按钮创建一个点击事件
        button.addEventListener("click",function () {
            console.log(i);
            //删除一条指定数据
            lists.splice(i,1)
            //把数组的数据展示到前台
            //把lists数组的数据，显示到前台
            d()
        })

        li.appendChild(span);
        li.appendChild(button);
        console.log(li);

        let ul = document.querySelector("#ul");
        ul.appendChild(li);
    }
}
d();
let ipt = document.querySelector("#ipt");
let btn = document.querySelector("#btn");
btn.addEventListener("click",function () {
    //把表单的数据放进数组
    if(ipt.value !=""){
        lists.push(ipt.value)
    }else {
        alert("不可以为空")
    }
    //把lists数组的数据，显示到前台
    d()
})